<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/h-ui/css/H-ui.admin.css">
    <link rel="stylesheet" href="${ctx}/libjs/plugins/h-ui/style.css">
    <script type="text/javascript" src="${ctx}/appjs/parking/addParkingGate.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=e392de55be62b195115e32b97043a1bd&plugin=AMap.Autocomplete,AMap.PlaceSearch" ></script>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<br>' +
            '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>道闸供应商</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="columns pull-left">
                        <h5 class="font-bold">新增道闸</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="frmParkingGate">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">运营商：</label>
                            <div class="col-sm-8">
                                <input class="form-control" hidden id="tenantCode" name="tenantCode" value="${tenant.tenantCode}">
                                <input class="form-control" value="${tenant.tenantName}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">站点：</label>
                            <div class="col-sm-4">
                                <select class="form-control" id="elecStationId" name="elecStationId">
                                    <option value="" selected></option>
                                    <c:forEach items="${elecStationList}" var="elecStation">
                                        <option value="${elecStation.elecStationId}">${elecStation.stationName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <input id="searchStation" name="searchStation" class="form-control" type="search" placeholder="搜索站点" >
                            </div>
                            <div class="col-sm-1">
                                <button type="button" class="btn btn-primary" onclick="addParkingGate.searchStation()">搜索</button>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">道闸供应商：</label>
                            <div class="col-sm-8">
                                <input class="form-control" hidden id="parkingSupplierId" name="parkingSupplierId" value="${tenantParkingSupplier.parkingSupplierId}" type="text">
                                <input class="form-control" id="supplierName" value="${tenantParkingSupplier.supplierName}"  type="text">

                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">道闸编号：</label>
                            <div class="col-sm-8">
                                <input id="gateCode" name="gateCode" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">道闸名称：</label>
                            <div class="col-sm-8">
                                <input id="gateName" name="gateName" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">道闸类型：</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="parkingType" name="parkingType">
                                    <option selected>--请选择--</option>
                                    <option value="0">第三方</option>
                                    <option value="1">自建</option>

                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">出入口类型：</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="gateType" name="gateType">
<%--                                    <option selected>--请选择--</option>--%>
<%--                                    <option value="0">入口</option>--%>
<%--                                    <option value="1">出口</option>--%>
                                    <option value="2" selected>出入口(同一个道闸)</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">电车占用价格(元/分钟)：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="elecAmount" name="elecAmount" type="number">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">电车免费时间(分钟)：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="elecFreeTime" name="elecFreeTime" type="number">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">移车时间(分钟)：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="elecFirstTime" name="elecFirstTime" type="number">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">加油免费时间(分钟)：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="oilFreeTime" name="oilFreeTime" type="number">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">油车占用价格(元/分钟)：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="oilAmount" name="oilAmount" type="number">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">联系人：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="contact" name="contact" type="text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">服务电话：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="phone" name="phone" type="text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">API帐号：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="parkingAppid" name="parkingAppid" type="text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">API密钥：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="parkingAppsecret" name="parkingAppsecret" type="text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">API地址：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="parkingUrl" name="parkingUrl" type="text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">纬度：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="latitude" name="latitude">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">经度：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="longitude" name="longitude">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">地图：</label>
                            <div class="col-sm-8">
                                <button id="id_address_input" type="button" class="btn btn-info " onclick="showMap()">开启地图</button>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">备注：</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="remarks" name="remarks" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3 col-sm-offset-8 text-right">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade modal1" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog modalBox" style="height: 80%;width: 100%">
        <div class="modal-content" style="height: 100%">
            <div class="modal-header">
                <%--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">--%>
                <%--&times;--%>
                <%--</button>--%>
                <h4 class="modal-title" id="myModalLabel">
                    请点击地图选择坐标
                </h4>
            </div>
            <div class="modal-body" style="height: 80%">
                <div id="containerMap"></div>
                <div id="myPageTop">
                    <table>
                        <tr>
                            <td>
                                <label>按关键字搜索：</label>
                            </td>
                            <td class="column2">
                                <label>左击获取经纬度：</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" style="color: #000" placeholder="请输入关键字进行搜索" id="tipinput">
                            </td>
                            <td class="column2">
                                <input type="text" readonly="true" id="lnglat">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭
                </button>
                <button type="button" class="btn btn-primary" id="confirmMap">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    addParkingGate.init();
</script>
<script type="text/javascript">


    //地图
    function showMap() {
        $('#myModal').modal('show')
        var map = new AMap.Map("containerMap", {
            resizeEnable: true,
            zoom: 11,
        });
        map.plugin(["AMap.ToolBar"], function () {
            map.addControl(new AMap.ToolBar());
        });
        if (location.href.indexOf('&guide=1') !== -1) {
            map.setStatus({scrollWheel: false})
        }
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function (e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
            $('#lnglat').attr({
                'data-longitude': e.lnglat.getLng(),
                'data-latitude': e.lnglat.getLat()
            })
        });
        var auto = new AMap.Autocomplete({
            input: "tipinput"
        });
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);
        }
    }

    $('#myModal').on('click', '#confirmMap', function () {
        var longitude = $('#lnglat').attr('data-longitude');
        var latitude = $('#lnglat').attr('data-latitude');
        if (!longitude && !latitude) {
            layer.msg('请点击地图选择经纬度！');
            return
        }
        $('#longitude').val(longitude);
        $('#latitude').val(latitude);
        $('#myModal').modal('hide')
    });
</script>
</body>
</html>
